<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">我的收藏</block>
		</cu-custom>
		
		<!-- 切换栏 -->
		<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'">
			<view class="border-bottom border-light-secondary flex align-stretch bg-white" style="height: 80rpx;position: fixed;left: 0;right: 0;z-index: 100;">
				<view class="flex-1 flex align-center justify-center"
				v-for="(item,index) in tabBars" :key="index"
				@click="changeTab(index)">
					<text class="font py-1" 
					:class="tabIndex === index ? 'text-main-color border-main-color':''"
					:style="tabIndex === index ? 'border-bottom: 5rpx solid;' : ''">{{item.name}}</text>
				</view>
			</view>
			<view style="height: 80rpx;"></view>
			
			<!-- 聊天收藏 -->
			<view v-if="tabIndex === 0" class="animated fadeIn fast">
				<view class="pt-3 px-3" v-for="(item,index) in list" :key="index"
				@longpress="long(item,index)" @click="send(item)">
					<view class="bg-gray rounded p-3">
						<text v-if="item.type === 'text'">{{item.data}}</text>
						<free-image v-else-if="item.type === 'image' || item.type === 'emoticon'" :src="item.data"></free-image>
						<video v-else-if="item.type === 'video' " :src="item.data" :poster="item.options.poster" controls style="width: 500rpx;height: 400rpx;"></video>
					</view>
				</view>
				<!-- 上拉加载 -->
				<view class="flex align-center justify-center py-5 bg-light"
				v-if="list.length >= 10">
					<text class="text-muted font">{{loadmore}}</text>
				</view>
				
			</view>
			<!-- 作品收藏-->
			<view v-else class="animated fadeIn fast px-3 py-1">
				<uni-swipe-action v-for="(item,index) in workslist" :key="index">
					<uni-swipe-action-item :options="options" @click="bindClick($event,item)">
						<media-list :item="item" :index="index"></media-list>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
				<!-- 默认提示 -->
				<view v-if="workslist.length === 0" class="flex align-center justify-center text-secondary" style="height: 200rpx;">暂无数据</view>
				<!-- 上拉加载更多 -->
				<view  v-else-if="workslist.length > 10"  class="flex align-center justify-center font-md text-secondary" style="height: 80rpx;" hover-class="bg-light">
					{{ loadText }}
				</view>
		
			</view>
			
		</scroll-view>
		
	</view>
</template>

<script>
	import freeImage from '@/components/free-ui/free-image.vue';
	import mediaList from '@/components/free-ui/media-list.vue';
	import uniSwipeAction from '@/components/uni-ui/uni-swipe-action/uni-swipe-action.vue';
	import uniSwipeActionItem from '@/components/uni-ui/uni-swipe-action-item/uni-swipe-action-item.vue';
	import { mapState } from 'vuex'
	// import $H from '@/common/free-lib/request.js';
	export default {
		components: {
			freeImage,
			uniSwipeAction,
			uniSwipeActionItem,
			mediaList,
		},
		data() {
			return {
				page:1,
				loadmore:"上拉加载更多", // 没有更多了，加载中...
				list:[],
				tabIndex:0,
				tabBars:[{
					name:"聊天收藏"
				},{
					name:"作品收藏"
				}],
				scrollH:500,
				type:"",
				options: [{
					text: '取消收藏',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}],
				workslist:[],
			}
		},
		onLoad(e) {
			let res = uni.getSystemInfoSync()
			this.scrollH = res.windowHeight - 226
			
			if(e.type){
				this.type = e.type
			}
			this.page = 1
			this.getData()
			
		},
		computed: {
			...mapState({
				user_id:state=>{
					return state.user.user ? state.user.user.id : 0
				}
			})
		},
		// onPullDownRefresh() {
		// 	this.page = 1
		// 	this.getData().then(res=>{
		// 		uni.stopPullDownRefresh()
		// 	})
		// },
		onPullDownRefresh() {
			this.page = 1
			if(this.tabIndex == 0){
				this.getData().then(res=>{
					uni.showToast({
						title: '刷新成功',
						icon: 'none'
					});
					uni.stopPullDownRefresh()
				}).catch(err=>{
					uni.showToast({
						title: '刷新失败',
						icon: 'none'
					});
					uni.stopPullDownRefresh()
				})
			}else{
				this.getworksData().then(res=>{
					uni.showToast({
						title: '刷新成功',
						icon: 'none'
					});
					uni.stopPullDownRefresh()
				}).catch(err=>{
					uni.showToast({
						title: '刷新失败',
						icon: 'none'
					});
					uni.stopPullDownRefresh()
				})
			}
			
		},
		// onReachBottom() {
		// 	this.page += 1
		// 	this.getData().catch(err=>{
		// 		this.page -= 1
		// 	})
		// },
		onReachBottom() {
			if(this.loadText !== '上拉加载更多'){
				return
			}
			this.loadText = '正在加载中...'
			this.page++
			this.getData()
			this.getworksData()
		},
		methods: {
			// 切换选项卡
			changeTab(index){
				this.tabIndex = index
				if(index == 1){
					this.getworksData()
				}else{
					this.getData()
				}
			},
			//获取作品收藏列表
			getworksData(){
				let page = this.page
				return this.$C.get(`/fava_list/${this.page}?user_id=${this.user_id}`).then(res=>{
					this.workslist = page === 1 ? res : [...this.workslist,...res],
					this.loadText = res.length === 10 ? '上拉加载更多' : '没有更多了'
				}).catch(err=>{
					if(page > 1){
						this.page--
					}
					this.loadText = '上拉加载更多'
				})
			},
			bindClick(e,item) {
				this.$C.post('/fava/video',{
					video_id:item.id
				},{ token:true }).then(res=>{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.page = 1
					this.getworksData()
				})
			},
			
			send(item){
				if(this.type !== 'send'){
					return
				}
				uni.$emit('sendItem',{
					sendType:"fava",
					...item
				})
				uni.navigateBack({
					delta: 1
				});
			},
			long(item,index){
				uni.showActionSheet({
					itemList: ['删除'],
					success: res => {
						if(res.tapIndex !== 0){
							return
						}
						uni.showModal({
							content: '是否要删除该收藏？',
							success: (res)=> {
								if (res.cancel) {
									return
								}
								this.$C.post('/fava/destroy',{
									id:item.id
								}).then(res=>{
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									});
									this.list.splice(index,1)
								})
							}
						});
					},
				});
			},
			getData(){
				return new Promise((result,reject)=>{
					this.$C.get('/fava/'+this.page).then(res=>{
						let list = res.map(item=>{
							item.options = JSON.parse(item.options)
							return item
						})
						this.list = this.page === 1 ? list : [...this.list,...list]
						this.loadmore = this.list.length === this.page * 10 ? '上拉加载更多' : '没有更多了'
						result(res)
					}).catch(err=>{
						reject(err)
					})
				})
			}
		}
	}
</script>

<style>

</style>
